<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店客房清扫APP原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        .page {
            display: none;
            height: 100vh;
            overflow-y: auto;
        }
        .active {
            display: block;
        }
        .bottom-nav {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
        .status-badge {
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 12px;
        }
        .room-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 页面导航 -->
    <div class="fixed top-0 left-0 p-4 z-50 bg-white bg-opacity-80 backdrop-blur-sm rounded-br-lg shadow-md">
        <select id="pageSelector" class="px-4 py-2 border rounded-lg text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="login">登录页面</option>
            <option value="home">首页/任务列表</option>
            <option value="room-detail">房间详情</option>
            <option value="checklist">清洁检查表</option>
            <option value="report-issue">问题报告</option>
            <option value="statistics">工作统计</option>
            <option value="profile">个人中心</option>
        </select>
    </div>

    <!-- 登录页面 -->
    <div id="login" class="page active flex flex-col items-center justify-center bg-gradient-to-b from-blue-500 to-blue-700 p-6">
        <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800">清扫管家</h1>
                <p class="text-gray-600 mt-2">酒店客房清扫管理系统</p>
            </div>
            
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-medium mb-2" for="username">
                    工号
                </label>
                <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                       id="username" type="text" placeholder="请输入工号">
            </div>
            
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-medium mb-2" for="password">
                    密码
                </label>
                <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                       id="password" type="password" placeholder="请输入密码">
            </div>
            
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input id="remember" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <label for="remember" class="ml-2 block text-sm text-gray-700">
                        记住我
                    </label>
                </div>
                <a href="#" class="text-sm text-blue-600 hover:text-blue-800">忘记密码?</a>
            </div>
            
            <button onclick="changePage('home')" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
                登录
            </button>
            
            <div class="text-center mt-8">
                <p class="text-sm text-gray-600">
                    技术支持: 酒店管理系统部门
                </p>
            </div>
        </div>
    </div>

    <!-- 首页/任务列表 -->
    <div id="home" class="page pb-20">
        <!-- 顶部状态栏 -->
        <div class="bg-white p-4 shadow-md">
            <div class="flex justify-between items-center">
                <h1 class="text-xl font-bold text-gray-800">今日任务</h1>
                <div class="flex items-center">
                    <span class="material-icons text-gray-600 mr-2">notifications</span>
                    <span class="bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                </div>
            </div>
            
            <!-- 任务统计 -->
            <div class="flex justify-between mt-4 bg-gray-50 rounded-xl p-3">
                <div class="text-center">
                    <p class="text-sm text-gray-600">待清扫</p>
                    <p class="text-xl font-bold text-blue-600">5</p>
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-600">清扫中</p>
                    <p class="text-xl font-bold text-orange-500">2</p>
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-600">待检查</p>
                    <p class="text-xl font-bold text-purple-600">3</p>
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-600">已完成</p>
                    <p class="text-xl font-bold text-green-600">8</p>
                </div>
            </div>
        </div>
        
        <!-- 筛选栏 -->
        <div class="bg-white p-4 flex space-x-2 overflow-x-auto">
            <button class="px-4 py-2 bg-blue-600 text-white rounded-full text-sm whitespace-nowrap">全部</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">待清扫</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">清扫中</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">待检查</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">已完成</button>
        </div>
        
        <!-- 房间列表 -->
        <div class="p-4">
            <!-- 房间卡片1 -->
            <div class="room-card bg-white mb-4" onclick="changePage('room-detail')">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="房间照片" class="w-full h-40 object-cover">
                    <div class="absolute top-3 right-3 bg-red-500 text-white status-badge">
                        待清扫
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="text-lg font-bold">房间 301</h3>
                        <span class="text-sm text-gray-600">标准双人间</span>
                    </div>
                    <div class="flex justify-between text-sm text-gray-600 mb-3">
                        <span>楼层: 3楼</span>
                        <span>预计用时: 30分钟</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-red-600 font-medium">优先级: 高</span>
                        <button class="bg-blue-600 text-white px-4 py-1 rounded-lg text-sm">开始清扫</button>
                    </div>
                </div>
            </div>
            
            <!-- 房间卡片2 -->
            <div class="room-card bg-white mb-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="房间照片" class="w-full h-40 object-cover">
                    <div class="absolute top-3 right-3 bg-orange-500 text-white status-badge">
                        清扫中
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="text-lg font-bold">房间 205</h3>
                        <span class="text-sm text-gray-600">豪华套房</span>
                    </div>
                    <div class="flex justify-between text-sm text-gray-600 mb-3">
                        <span>楼层: 2楼</span>
                        <span>已用时间: 15分钟</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-yellow-600 font-medium">优先级: 中</span>
                        <button class="bg-green-600 text-white px-4 py-1 rounded-lg text-sm">完成清扫</button>
                    </div>
                </div>
            </div>
            
            <!-- 房间卡片3 -->
            <div class="room-card bg-white mb-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="房间照片" class="w-full h-40 object-cover">
                    <div class="absolute top-3 right-3 bg-purple-500 text-white status-badge">
                        待检查
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="text-lg font-bold">房间 412</h3>
                        <span class="text-sm text-gray-600">商务单人间</span>
                    </div>
                    <div class="flex justify-between text-sm text-gray-600 mb-3">
                        <span>楼层: 4楼</span>
                        <span>完成时间: 10:30</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-green-600 font-medium">优先级: 低</span>
                        <button class="bg-purple-600 text-white px-4 py-1 rounded-lg text-sm">查看详情</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white bottom-nav">
            <div class="flex justify-around py-2">
                <div class="flex flex-col items-center text-blue-600">
                    <span class="material-icons">home</span>
                    <span class="text-xs mt-1">首页</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('statistics')">
                    <span class="material-icons">bar_chart</span>
                    <span class="text-xs mt-1">统计</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('report-issue')">
                    <span class="material-icons">report_problem</span>
                    <span class="text-xs mt-1">报告</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('profile')">
                    <span class="material-icons">person</span>
                    <span class="text-xs mt-1">我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 房间详情页面 -->
    <div id="room-detail" class="page pb-20">
        <!-- 顶部导航 -->
        <div class="bg-white p-4 flex items-center shadow-md">
            <span class="material-icons mr-2" onclick="changePage('home')">arrow_back</span>
            <h1 class="text-xl font-bold text-gray-800">房间 301</h1>
        </div>
        
        <!-- 房间信息 -->
        <div class="p-4 bg-white mt-2 shadow-sm">
            <div class="flex justify-between items-center mb-4">
                <div>
                    <h2 class="text-lg font-bold">标准双人间</h2>
                    <p class="text-sm text-gray-600">3楼 | 东侧</p>
                </div>
                <div class="bg-red-500 text-white status-badge">
                    待清扫
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="bg-gray-50 p-3 rounded-lg">
                    <p class="text-sm text-gray-600">上次退房</p>
                    <p class="font-medium">今天 10:00</p>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <p class="text-sm text-gray-600">预计入住</p>
                    <p class="font-medium">今天 14:00</p>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <p class="text-sm text-gray-600">预计用时</p>
                    <p class="font-medium">30分钟</p>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <p class="text-sm text-gray-600">优先级</p>
                    <p class="font-medium text-red-600">高</p>
                </div>
            </div>
            
            <div class="bg-yellow-50 p-3 rounded-lg border border-yellow-200 mb-4">
                <p class="text-sm font-medium text-yellow-800">特殊备注</p>
                <p class="text-sm text-yellow-700">客人要求额外提供两个枕头，并确保窗帘完全遮光。</p>
            </div>
            
            <div class="flex space-x-2">
                <button class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium" onclick="changePage('checklist')">
                    开始清扫
                </button>
                <button class="bg-gray-200 text-gray-700 p-3 rounded-lg" onclick="changePage('report-issue')">
                    <span class="material-icons">report_problem</span>
                </button>
            </div>
        </div>
        
        <!-- 房间照片 -->
        <div class="p-4 bg-white mt-2 shadow-sm">
            <h3 class="text-lg font-medium mb-3">房间照片</h3>
            <div class="grid grid-cols-3 gap-2">
                <img src="https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-24 object-cover rounded-lg">
                <img src="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-24 object-cover rounded-lg">
                <img src="https://images.unsplash.com/photo-1584132967334-10e028bd69f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-24 object-cover rounded-lg">
            </div>
        </div>
        
        <!-- 清洁历史 -->
        <div class="p-4 bg-white mt-2 shadow-sm">
            <h3 class="text-lg font-medium mb-3">清洁历史</h3>
            <div class="border-l-2 border-gray-200 pl-4 ml-2">
                <div class="relative mb-4">
                    <div class="absolute -left-6 top-0 h-4 w-4 rounded-full bg-green-500"></div>
                    <p class="text-sm font-medium">昨天 14:25 完成清扫</p>
                    <p class="text-xs text-gray-600">张明 | 用时: 28分钟 | 评分: 4.8</p>
                </div>
                <div class="relative mb-4">
                    <div class="absolute -left-6 top-0 h-4 w-4 rounded-full bg-green-500"></div>
                    <p class="text-sm font-medium">前天 15:10 完成清扫</p>
                    <p class="text-xs text-gray-600">李华 | 用时: 32分钟 | 评分: 4.5</p>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white bottom-nav">
            <div class="flex justify-around py-2">
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('home')">
                    <span class="material-icons">home</span>
                    <span class="text-xs mt-1">首页</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('statistics')">
                    <span class="material-icons">bar_chart</span>
                    <span class="text-xs mt-1">统计</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('report-issue')">
                    <span class="material-icons">report_problem</span>
                    <span class="text-xs mt-1">报告</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('profile')">
                    <span class="material-icons">person</span>
                    <span class="text-xs mt-1">我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 清洁检查表页面 -->
    <div id="checklist" class="page pb-20">
        <!-- 顶部导航 -->
        <div class="bg-white p-4 flex items-center shadow-md">
            <span class="material-icons mr-2" onclick="changePage('room-detail')">arrow_back</span>
            <h1 class="text-xl font-bold text-gray-800">清洁检查表</h1>
            <div class="ml-auto flex items-center">
                <span class="text-sm text-gray-600 mr-2">房间 301</span>
                <div class="bg-orange-500 text-white status-badge">
                    清扫中
                </div>
            </div>
        </div>
        
        <!-- 计时器 -->
        <div class="bg-blue-50 p-4 flex justify-between items-center">
            <div>
                <p class="text-sm text-gray-600">已用时间</p>
                <p class="text-xl font-bold text-blue-800">00:12:45</p>
            </div>
            <button class="bg-red-500 text-white px-4 py-2 rounded-lg text-sm">
                暂停
            </button>
        </div>
        
        <!-- 检查表 -->
        <div class="p-4">
            <h3 class="text-lg font-medium mb-3">卧室区域</h3>
            
            <div class="bg-white rounded-lg shadow-sm mb-3 p-4">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">床单更换与整理</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">枕套更换</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">地面清洁</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
            </div>
            
            <h3 class="text-lg font-medium mb-3">浴室区域</h3>
            
            <div class="bg-white rounded-lg shadow-sm mb-3 p-4">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded" checked>
                        <label class="ml-2 text-gray-800">毛巾更换</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">浴缸/淋浴间清洁</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">洗漱用品补充</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
            </div>
            
            <h3 class="text-lg font-medium mb-3">其他区域</h3>
            
            <div class="bg-white rounded-lg shadow-sm mb-3 p-4">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">迷你吧台补充</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                        <label class="ml-2 text-gray-800">窗帘整理</label>
                    </div>
                    <span class="material-icons text-gray-400">chevron_right</span>
                </div>
            </div>
            
            <!-- 特殊备注 -->
            <div class="bg-yellow-50 p-3 rounded-lg border border-yellow-200 mb-4">
                <p class="text-sm font-medium text-yellow-800">特殊备注</p>
                <p class="text-sm text-yellow-700">客人要求额外提供两个枕头，并确保窗帘完全遮光。</p>
                <div class="flex items-center mt-2">
                    <input type="checkbox" class="h-5 w-5 text-blue-600 rounded">
                    <label class="ml-2 text-yellow-800 text-sm">已完成特殊要求</label>
                </div>
            </div>
            
            <!-- 拍照上传 -->
            <div class="bg-white rounded-lg shadow-sm mb-6 p-4">
                <h3 class="text-md font-medium mb-3">清洁完成照片</h3>
                <div class="grid grid-cols-3 gap-2 mb-3">
                    <div class="relative h-24 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-gray-400 text-3xl">add_a_photo</span>
                    </div>
                    <div class="relative h-24 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-gray-400 text-3xl">add_a_photo</span>
                    </div>
                    <div class="relative h-24 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-gray-400 text-3xl">add_a_photo</span>
                    </div>
                </div>
                <p class="text-xs text-gray-500">请拍摄至少3张清洁完成后的房间照片</p>
            </div>
            
            <!-- 提交按钮 -->
            <button class="w-full bg-green-600 text-white py-3 rounded-lg font-medium mb-4">
                完成清扫
            </button>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white bottom-nav">
            <div class="flex justify-around py-2">
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('home')">
                    <span class="material-icons">home</span>
                    <span class="text-xs mt-1">首页</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('statistics')">
                    <span class="material-icons">bar_chart</span>
                    <span class="text-xs mt-1">统计</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('report-issue')">
                    <span class="material-icons">report_problem</span>
                    <span class="text-xs mt-1">报告</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('profile')">
                    <span class="material-icons">person</span>
                    <span class="text-xs mt-1">我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 问题报告页面 -->
    <div id="report-issue" class="page pb-20">
        <!-- 顶部导航 -->
        <div class="bg-white p-4 flex items-center shadow-md">
            <span class="material-icons mr-2" onclick="changePage('home')">arrow_back</span>
            <h1 class="text-xl font-bold text-gray-800">问题报告</h1>
        </div>
        
        <!-- 表单 -->
        <div class="p-4">
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">选择房间</h3>
                <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option>房间 301 - 标准双人间</option>
                    <option>房间 205 - 豪华套房</option>
                    <option>房间 412 - 商务单人间</option>
                </select>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">问题类型</h3>
                <div class="grid grid-cols-2 gap-3 mb-3">
                    <div class="border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="issue-type" id="equipment" class="h-4 w-4 text-blue-600">
                        <label for="equipment" class="ml-2 text-gray-800">设备损坏</label>
                    </div>
                    <div class="border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="issue-type" id="supplies" class="h-4 w-4 text-blue-600">
                        <label for="supplies" class="ml-2 text-gray-800">物品缺失</label>
                    </div>
                    <div class="border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="issue-type" id="cleaning" class="h-4 w-4 text-blue-600">
                        <label for="cleaning" class="ml-2 text-gray-800">清洁困难</label>
                    </div>
                    <div class="border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="issue-type" id="other" class="h-4 w-4 text-blue-600">
                        <label for="other" class="ml-2 text-gray-800">其他问题</label>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">问题描述</h3>
                <textarea class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 h-32" placeholder="请详细描述您遇到的问题..."></textarea>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">上传照片</h3>
                <div class="grid grid-cols-3 gap-2 mb-3">
                    <div class="relative h-24 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-gray-400 text-3xl">add_a_photo</span>
                    </div>
                    <div class="relative h-24 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-gray-400 text-3xl">add_a_photo</span>
                    </div>
                    <div class="relative h-24 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-gray-400 text-3xl">add_a_photo</span>
                    </div>
                </div>
                <p class="text-xs text-gray-500">请上传问题相关照片（可选）</p>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">紧急程度</h3>
                <div class="flex space-x-3">
                    <div class="flex-1 border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="urgency" id="low" class="h-4 w-4 text-blue-600">
                        <label for="low" class="ml-2 text-gray-800">低</label>
                    </div>
                    <div class="flex-1 border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="urgency" id="medium" class="h-4 w-4 text-blue-600">
                        <label for="medium" class="ml-2 text-gray-800">中</label>
                    </div>
                    <div class="flex-1 border border-gray-300 rounded-lg p-3 flex items-center">
                        <input type="radio" name="urgency" id="high" class="h-4 w-4 text-blue-600">
                        <label for="high" class="ml-2 text-gray-800">高</label>
                    </div>
                </div>
            </div>
            
            <!-- 提交按钮 -->
            <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium mb-4">
                提交报告
            </button>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white bottom-nav">
            <div class="flex justify-around py-2">
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('home')">
                    <span class="material-icons">home</span>
                    <span class="text-xs mt-1">首页</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('statistics')">
                    <span class="material-icons">bar_chart</span>
                    <span class="text-xs mt-1">统计</span>
                </div>
                <div class="flex flex-col items-center text-blue-600">
                    <span class="material-icons">report_problem</span>
                    <span class="text-xs mt-1">报告</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('profile')">
                    <span class="material-icons">person</span>
                    <span class="text-xs mt-1">我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 工作统计页面 -->
    <div id="statistics" class="page pb-20">
        <!-- 顶部导航 -->
        <div class="bg-white p-4 flex items-center shadow-md">
            <h1 class="text-xl font-bold text-gray-800">工作统计</h1>
        </div>
        
        <!-- 时间筛选 -->
        <div class="bg-white p-4 flex space-x-2 overflow-x-auto">
            <button class="px-4 py-2 bg-blue-600 text-white rounded-full text-sm whitespace-nowrap">今日</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">本周</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">本月</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full text-sm whitespace-nowrap">自定义</button>
        </div>
        
        <!-- 统计卡片 -->
        <div class="p-4">
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">今日概览</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">已完成房间</p>
                        <p class="text-2xl font-bold text-blue-700">8</p>
                    </div>
                    <div class="bg-green-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">平均用时</p>
                        <p class="text-2xl font-bold text-green-700">28分钟</p>
                    </div>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">质检通过率</p>
                        <p class="text-2xl font-bold text-purple-700">95%</p>
                    </div>
                    <div class="bg-yellow-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">待完成房间</p>
                        <p class="text-2xl font-bold text-yellow-700">5</p>
                    </div>
                </div>
            </div>
            
            <!-- 图表 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium">工作效率趋势</h3>
                    <select class="text-sm border rounded p-1">
                        <option>最近7天</option>
                        <option>最近30天</option>
                    </select>
                </div>
                <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                    <p class="text-gray-500">图表区域</p>
                </div>
            </div>
            
            <!-- 房间类型统计 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">房间类型统计</h3>
                <div class="space-y-3">
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>标准双人间</span>
                            <span>5间</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full" style="width: 62%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>豪华套房</span>
                            <span>2间</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full" style="width: 25%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>商务单人间</span>
                            <span>1间</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full" style="width: 13%"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 质检反馈 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h3 class="text-lg font-medium mb-3">质检反馈</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <span class="material-icons text-green-600">thumb_up</span>
                        </div>
                        <div>
                            <p class="font-medium">浴室清洁非常彻底</p>
                            <p class="text-xs text-gray-500">房间301 | 今天 11:30</p>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                            <span class="material-icons text-red-600">thumb_down</span>
                        </div>
                        <div>
                            <p class="font-medium">窗台有灰尘未清理</p>
                            <p class="text-xs text-gray-500">房间205 | 今天 10:15</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white bottom-nav">
            <div class="flex justify-around py-2">
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('home')">
                    <span class="material-icons">home</span>
                    <span class="text-xs mt-1">首页</span>
                </div>
                <div class="flex flex-col items-center text-blue-600">
                    <span class="material-icons">bar_chart</span>
                    <span class="text-xs mt-1">统计</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('report-issue')">
                    <span class="material-icons">report_problem</span>
                    <span class="text-xs mt-1">报告</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('profile')">
                    <span class="material-icons">person</span>
                    <span class="text-xs mt-1">我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 个人中心页面 -->
    <div id="profile" class="page pb-20">
        <!-- 顶部个人信息 -->
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 p-6">
            <div class="flex items-center">
                <div class="h-20 w-20 rounded-full bg-white flex items-center justify-center mr-4">
                    <span class="material-icons text-blue-500 text-4xl">person</span>
                </div>
                <div class="text-white">
                    <h2 class="text-xl font-bold">张明</h2>
                    <p class="text-blue-100">工号: 10086</p>
                    <div class="flex items-center mt-1">
                        <span class="material-icons text-yellow-400 text-sm">star</span>
                        <span class="material-icons text-yellow-400 text-sm">star</span>
                        <span class="material-icons text-yellow-400 text-sm">star</span>
                        <span class="material-icons text-yellow-400 text-sm">star</span>
                        <span class="material-icons text-yellow-400 text-sm">star_half</span>
                        <span class="text-sm ml-1 text-blue-100">4.8</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 工作数据 -->
        <div class="bg-white p-4 -mt-4 rounded-t-3xl shadow-sm">
            <div class="grid grid-cols-3 gap-4 mb-4">
                <div class="text-center">
                    <p class="text-2xl font-bold text-blue-600">127</p>
                    <p class="text-xs text-gray-600">本月房间</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-green-600">98%</p>
                    <p class="text-xs text-gray-600">通过率</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-purple-600">4.8</p>
                    <p class="text-xs text-gray-600">平均评分</p>
                </div>
            </div>
        </div>
        
        <!-- 功能菜单 -->
        <div class="p-4">
            <div class="bg-white rounded-lg shadow-sm mb-4">
                <div class="p-4 border-b flex items-center">
                    <span class="material-icons text-blue-500 mr-3">badge</span>
                    <span>个人信息</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
                <div class="p-4 border-b flex items-center">
                    <span class="material-icons text-blue-500 mr-3">history</span>
                    <span>工作记录</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
                <div class="p-4 border-b flex items-center">
                    <span class="material-icons text-blue-500 mr-3">emoji_events</span>
                    <span>我的成就</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
                <div class="p-4 flex items-center">
                    <span class="material-icons text-blue-500 mr-3">school</span>
                    <span>培训课程</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm mb-4">
                <div class="p-4 border-b flex items-center">
                    <span class="material-icons text-blue-500 mr-3">notifications</span>
                    <span>消息通知</span>
                    <span class="bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center ml-2">3</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
                <div class="p-4 border-b flex items-center">
                    <span class="material-icons text-blue-500 mr-3">help</span>
                    <span>帮助中心</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
                <div class="p-4 flex items-center">
                    <span class="material-icons text-blue-500 mr-3">settings</span>
                    <span>设置</span>
                    <span class="material-icons text-gray-400 ml-auto">chevron_right</span>
                </div>
            </div>
            
            <button class="w-full bg-gray-200 text-gray-700 py-3 rounded-lg font-medium mb-4">
                退出登录
            </button>
            
            <p class="text-center text-xs text-gray-500">版本 1.0.0</p>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white bottom-nav">
            <div class="flex justify-around py-2">
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('home')">
                    <span class="material-icons">home</span>
                    <span class="text-xs mt-1">首页</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('statistics')">
                    <span class="material-icons">bar_chart</span>
                    <span class="text-xs mt-1">统计</span>
                </div>
                <div class="flex flex-col items-center text-gray-500" onclick="changePage('report-issue')">
                    <span class="material-icons">report_problem</span>
                    <span class="text-xs mt-1">报告</span>
                </div>
                <div class="flex flex-col items-center text-blue-600">
                    <span class="material-icons">person</span>
                    <span class="text-xs mt-1">我的</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面切换功能
        function changePage(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
            document.getElementById('pageSelector').value = pageId;
        }
        
        // 页面选择器事件监听
        document.getElementById('pageSelector').addEventListener('change', function() {
            changePage(this.value);
        });
    </script>
</body>
</html>